<template>
    <pos-dialog title="Create new customer profile" :visible="visible" @close="close">
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Name<sup>*</sup></div>
                <input type="text" class="form-control" :class="{'invalid':errors.first_name}"
                       v-model="billing.first_name">
                <div class="invalid-feedback" v-if="errors.first_name">{{ errors.first_name }}</div>
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Phone</div>
                <input type="text" class="form-control" v-model="billing.phone">
            </div>
        </div>
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Company</div>
                <input type="text" class="form-control" v-model="billing.company">
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">VAT number</div>
                <input type="text" class="form-control" v-model="billing_vat">
            </div>
        </div>
        <div class="form-group">
            <div class="form-input-label">Email<sup>*</sup></div>
            <input type="text" class="form-control" :class="{'invalid':errors.email}" v-model="billing.email">
            <div class="invalid-feedback" v-if="errors.email">{{ errors.email }}</div>
        </div>
        <div class="form-group">
            <div class="form-input-label">Address</div>
            <div>
                <vue-google-autocomplete
                        ref="address"
                        id="biling"
                        classname="form-control"
                        placeholder="Please type your address"
                        v-on:placechanged="getAddressData"
                        :country="['irl','uk']"
                />
            </div>
        </div>
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">City</div>
                <input type="text" class="form-control" v-model="billing.city">
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Post Code</div>
                <input type="text" class="form-control" v-model="billing.postcode">
            </div>
        </div>
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Country</div>
                <input type="text" class="form-control" v-model="billing.country">
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">State</div>
                <input type="text" class="form-control" v-model="billing.state">
            </div>
        </div>
        <div class="form-group form-group-inline">
            <div class="form-input-label">Use the same info for shipping</div>
            <label class="pos-switch">
                <input type="checkbox" ref="switch" @change="change">
                <span class="slider round"></span>
            </label>
        </div>
        <div class="form-group invalid-feedback" v-if="responseError">{{ responseError }}</div>
        <div class="form-group">
            <button class="btn btn-primary form-control text-uppercase" @click="onSubmit">Save Customer</button>
        </div>
        <pos-loading :visible="showLoading"/>
    </pos-dialog>
</template>

<script>
import VueGoogleAutocomplete from "vue-google-autocomplete";

const defaultBilling = {
    first_name: "",
    last_name: "",
    company: "",
    address_1: "",
    address_2: "",
    city: "",
    state: "",
    postcode: "",
    country: "",
    email: "",
    phone: ""
}
export default {
    name: "CreateCustomer",
    components: {VueGoogleAutocomplete},
    props: {
        value: false
    },
    data() {
        return {
            visible: false,
            autocomplete: null,
            autocomplateText: '',
            billing: {},
            useForShipping: false,
            billing_vat: '',
            errors: {
                first_name: null,
                email: null
            },
            responseError: null,
            showLoading: false
        }
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        getAddressData(addressData, placeResultData, id) {
            // console.log(addressData);
            // console.log(placeResultData);
            let {
                route,
                locality,
                country,
                postal_code,
                administrative_area_level_1,
                administrative_area_level_2
            } = addressData;

            this.billing.address_1 = route;

            if (locality) {
                this.billing.city = locality;
            } else {
                this.billing.city = administrative_area_level_2;
            }

            if (country) {
                this.billing.country = country;
            }

            if (administrative_area_level_1) {
                this.billing.state = administrative_area_level_1;
            }

            if (postal_code) {
                this.billing.postcode = postal_code;
            }

            this.$forceUpdate();
        },
        onSubmit() {
            const {billing, billing_vat} = this;
            const {email, first_name, last_name} = this.billing;
            const customer = {
                email,
                first_name,
                last_name,
                username: `${first_name} ${last_name}`,
                password: '123456',
                billing
            }

            if (this.useForShipping) {
                customer.shipping = billing;
            }

            if (billing_vat) {
                customer.meta_data = [
                    {
                        key: 'billing_vat',
                        value: billing_vat
                    }
                ]
            }

            let check = true;
            if (!first_name) {
                this.errors.first_name = 'This field is required';
                check = false;
            } else {
                this.errors.first_name = null;
            }

            if (!email) {
                this.errors.email = 'This field is required';
                check = false;
            } else {
                this.errors.email = null;
            }

            if (!check) return false;

            this.showLoading = true;
            this.$http.post('/customers?_locale=user', customer).then(response => {
                //console.log(response);
                this.billing = defaultBilling;
                this.$emit('created', response);
                this.close();
            }).catch(reason => {
                this.responseError = reason.message;
            }).finally(() => {
                this.showLoading = false;
            });
        },
        change(v) {
            this.useForShipping = this.$refs.switch.checked;
        }
    },
    created() {
        this.visible = this.value;
    },
    mounted() {
        this.billing = defaultBilling;
    }
}
</script>

<style scoped>

</style>